<script setup lang="ts">
import { getContributeResult } from "@/services/category";
import type { PageQuery, PageResult } from "@/types/mycontribute";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

// 请求的信息
const pageQuery = ref<PageQuery>({
  reviewResult: null, // 审核了吗 -- review_result
  reviewInfo: 1, // 审核状态：指定待审核状态
  recommended: null, // 推荐了吗
  title: null, // 稿件名称
  userId: null, // 上传者，添加对上传者的否定
  pageNo: 1,
  pageSize: 10,
});

// 请求信息
const isFinish = ref(false);
const pageResult = ref<PageResult>({
  total: 0,
  pages: 0,
  list: [],
});

// 多选框信息
const localdataCheckList = [
  {
    text: "已推荐",
  },
  {
    text: "已审核",
  }
];
// 选择情况
const selectOptions = ref({
  restrict: [],
  title: "",
});

// 获取数据的逻辑函数
const addPageResult = () => {
  // 到达底部的判断
  if (pageResult.value.total <= pageResult.value.list.length) {
    // 只展示一次
    uni.showToast({
      title: "到达最底啦",
      duration: 2000,
    });

    return;
  }
  // 获取
  getMore();
};
// 真正获取数据的执行函数
const getMore = async () => {
  // 构造query
  let query: PageQuery = pageQuery.value;
  console.log("selectOptions", selectOptions);

  if (selectOptions.value.restrict.includes(0)) {
    // 推荐标签
    query.recommended = 1;
  } else {
    query.recommended = null;
  }

  if (selectOptions.value.restrict.includes(1)) {
    // 审核标签
    query.reviewResult = 1;
  } else {
    query.reviewResult = null;
  }

  query.title = selectOptions.value.title;
  pageQuery.value = query;
  const res = await getContributeResult(query);
  console.log("res:", res, res.data);

  // 记录新数据
  pageResult.value.data = pageResult.value.data.concat(res.data.records);
  pageResult.value.total = res.data.total;
  if (pageResult.value.total === pageResult.value.data.length) {
    isFinish.value = true;
  }

  // 往后来一页
  pageQuery.value.pageNo = pageQuery.value.pageNo + 1;
};

// 滑动到最底部的时候
const onLowestOfScroll = () => {
  console.log("到达最底部");
  addPageResult();
};

// 启动查询
const onSelectSearch = () => {
  console.log("进行查询");
  //reset
  pageQuery.value.pageNo = 1;
  isFinish.value = false;
  pageResult.value.list = [];
  pageResult.value.total = 1;
  getMore();
};

// activeIndex左侧坐标(显示高亮按钮)
const activeIndex = ref(0);

// 广告
const advertiseList = [
  {
    url: "http://192.168.31.72:9000/books-bucket/static/advertise/ad1.png",
  },
  {
    url: "http://192.168.31.72:9000/books-bucket/static/advertise/ad2.png",
  },
  {
    url: "http://192.168.31.72:9000/books-bucket/static/advertise/ad3.png",
  },
];

// 检测选择项目

// 启动时候执行
onLoad(() => {
  getMore();
});
</script>
<template>
  <view class="viewport">
    <!-- 搜索框 -->
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in localdataCheckList"
          class="item"
          :class="{ active: index === activeIndex }"
          @tap="activeIndex = index"
        >
          <text class="name"> {{ item.text }} </text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view class="secondary" scroll-y>
        <!-- 焦点图 -->
        <view class="advertise">
          <swiper
            autoplay
            circular
            indicator-dots
            interval="2000"
            indicator-color="#fff"
            indicator-active-color="#f3514f"
          >
            <swiper-item v-for="(item, index0) in advertiseList">
              <image :src="item.url" />
            </swiper-item>
          </swiper>
        </view>
        <!-- 内容区域 -->
        <view class="panel">
          <view class="title"> </view>
          <view class="section">
            <navigator
              v-for="item in pageResult.list"
              :key="item.id"
              class="contributes"
              hover-class="none"
              :url="`/pages/contributeDetail/contributeDetail?id=${item.id}`"
            >
              <image
                class="image"
                mode="aspectFill"
                :src="item.picture"
              ></image>
              <view class="name ellipsis"> 标题： {{ item.title }}</view>
              <view class="introduction">
                <text class="symbol">简介：</text>
                <text class="number">{{ item.briefIntroduction }}</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <!-- <PageSkeleton v-else></PageSkeleton> -->
</template>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.search {
  padding: 0 30rpx 20rpx;
  background-color: #fff;
  .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64rpx;
    padding-left: 26rpx;
    color: #8b8b8b;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: #f3f4f4;
  }
}
.icon-search {
  &::before {
    margin-right: 10rpx;
  }
}
/* 分类 */
.categories {
  flex: 1;
  min-height: 400rpx;
  display: flex;
}
/* 一级分类 */
.primary {
  overflow: hidden;
  width: 180rpx;
  flex: none;
  background-color: #f6f6f6;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 96rpx;
    font-size: 26rpx;
    color: #595c63;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 42rpx;
      bottom: 0;
      width: 96rpx;
      border-top: 1rpx solid #e3e4e7;
    }
  }
  .active {
    background-color: #fff;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 8rpx;
      height: 100%;
      background-color: #27ba9b;
    }
  }
}
.primary .item:last-child::after,
.primary .active::after {
  display: none;
}

/* 广告  */
.advertise {
  border-radius: 10rpx;
  overflow: hidden;
  background-color: #cfcfcf;
  margin: 10rpx;
  height: 240rpx;
  swiper {
    // background-color: skyblue;

    swiper-item {
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
}
/* 二级分类 */
.secondary {
  background-color: #fff;
  // carousel决定了轮播图组件的css的样式（覆盖方式）
  .carousel {
    height: 200rpx;
    margin: 0 30rpx 20rpx;
    border-radius: 4rpx;
    overflow: hidden;
  }
  .panel {
    margin: 0 30rpx 0rpx;
  }
  .title {
    height: 60rpx;
    line-height: 60rpx;
    color: #333;
    font-size: 28rpx;
    border-bottom: 1rpx solid #f7f7f8;
    .more {
      float: right;
      padding-left: 20rpx;
      font-size: 24rpx;
      color: #999;
    }
  }
  .more {
    &::after {
      font-family: "erabbit" !important;
      content: "\e6c2";
    }
  }
  .section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0;
    .contributes {
      width: 150rpx;
      margin: 0rpx 30rpx 20rpx 0;
      &:nth-child(3n) {
        margin-right: 0;
      }
      image {
        width: 150rpx;
        height: 150rpx;
      }
      .name {
        padding: 5rpx;
        font-size: 22rpx;
        color: #333;
      }
      .introduction {
        padding: 5rpx;
        font-size: 18rpx;
        color: #858686;
      }
      .number {
        font-size: smaller;
      }
    }
  }
}
</style>
